<template>
    <div class="role">
        <div class="role-button">
            <el-button type="primary" @click="addJuw" v-if="hasPermission('addRole')">添加角色</el-button>
        </div>
        <!-- editRoleShow -->
        <div class="role-table">
            <el-table :data="getRole" border default-expand-all
                :header-cell-style="{ background: '#f4f6f8', color: '#909399' }">
                <el-table-column prop="id" label="序号" width="60"></el-table-column>
                <el-table-column prop="name" label="角色" width="250">
                    <template #default="{ row }">
                        <span v-if="!row.show">{{ row.name }}</span>
                        <el-input v-else v-model="row.name"> </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="启用">
                    <template #default="{ row }">
                        <div v-if="!row.show">
                            <span v-if="row.state == 1">已启用</span>
                            <span v-else>未启用</span>
                        </div>
                        <div v-else>
                            <el-switch v-model="row.state" :active-value="1" :inactive-value="0" size="large" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" width="400">
                    <template #default="{ row }">
                        <span v-if="!row.show">{{ row.description }}</span>
                        <el-input v-else v-model="row.description" style="width: 340px" type="textarea" />
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <div v-if="!row.show">
                            <el-button type="primary" size="small" text @click="fenPei(row)">分配权限</el-button>
                            <el-button type="primary" size="small" text @click="editRole(row)">编辑</el-button>
                            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delRole(row)">
                                <template #reference>
                                    <el-button type="primary" size="small" text>删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                        <div v-else>
                            <el-button type="primary" size="small" @click="editRoleDing(row)">确定</el-button>
                            <el-button size="small" @click="editRoleXiao(row)">取消</el-button>
                        </div>

                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="role-pagination">
                <el-pagination v-model:current-page="page" v-model:page-size="size" layout="prev, pager, next"
                    :total="total" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
    <!-- 弹框 -->
    <popUp ref="AddPopUp" title="新增角色" :confirm="AddConfirm" :xiao="AddXiao" width="500">
        <template #cont>
            <el-form ref="formRef" :rules="rules" label-width="100px" :model="formData" style="margin: 0 30px;">
                <el-form-item label="角色名称" prop="name">
                    <el-input placeholder="请输入角色名称" v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="启用">
                    <el-switch size="large" v-model="formData.state" active-value="0" inactive-value="1" />
                </el-form-item>
                <el-form-item label="角色描述" prop="description">
                    <el-input v-model="formData.description" style="width: 600px" :rows="2" type="textarea"
                        placeholder="请输入角色描述" />
                </el-form-item>
            </el-form>
        </template>
    </popUp>
    <!-- 权限弹框 -->
    <popUp ref="DetailRef" title="分配权限" :confirm="Detail" :xiao="DetailXiao" width="650">
        <template #cont>
            <el-tree ref="treeRef" :data="dataDetail" show-checkbox node-key="id"
                :props="{ children: 'children', label: 'name' }" check-strictly />
            <!-- <el-tree style="max-width: 600px" :data="data"  show-checkbox /> -->
        </template>
    </popUp>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { hasPermission } from "@/utils/permissionUtil.js"
import { editPermission, getRoleList, addRole, deleteRole, getRoleDetail, getPermission, updatePermission } from "@/api/roleApi/roleApi.js"
import popUp from "@/components/popUp.vue"
import { ElMOpen, transListToTreeData } from "@/utils/fn.js"
let getRole = ref([])
let DetailRef = ref()
let AddPopUp = ref()
let dataDetail = ref([])
let treeRef = ref()
let formRef = ref()
let editRoleShow = ref(false)
// 获取角色列表
let size = ref(5)
let formData = ref({
    name: "",
    state: "",
    description: "",
})
let rules = ref({
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
    description: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
})
// 获取角色列表
let page = ref(1)
let total = ref(0)
let getData = () => {
    getRoleList(page.value).then(res => {
        console.log(res.data.total);
        total.value = Number(res.data.total)
        res.data.rows.forEach(item => {
            item.show = false
        });
        getRole.value = res.data.rows
    })
}
getData()

let handleCurrentChange = (val) => {
    page.value = val
    getData()
}
// 添加角色
let addJuw = () => {
    AddPopUp.value.open()
}
// 确定
let AddConfirm = async () => {
    await formRef.value.validate()
    addRole(formData.value).then((res) => {
        console.log(res.message);
        ElMOpen(res.message, "success")
        getData()
    })
    AddPopUp.value.close()
}

let AddXiao = () => {
    formData.value = {
        name: "",
        state: "",
        description: "",
    }
    AddPopUp.value.close()
}
// 分配权限
let uId = ref(0)
let fenPei = (row) => {
    getPermission().then(async (res) => {
        dataDetail.value = await transListToTreeData(res.data, 0)
    })
    DetailRef.value.open()
    getRoleDetail(row.id).then((res) => {
        console.log(res.data);
        uId.value = res.data.id
        // 设置默认选中
        treeRef.value!.setCheckedKeys(res.data.permIds)
    })
}
// 权限确定
let Detail = () => {
    let permIds = treeRef.value!.getCheckedKeys(false)
    let data = ref({
        id: uId.value,
        permIds: permIds
    })
    updatePermission(data.value).then((res) => {
        console.log(res);
        ElMOpen(res.message, "success")
        getData()
        DetailRef.value.close()
    })
}
// 权限关闭
let DetailXiao = () => {
    DetailRef.value.close()
}

// 删除角色
let delRole = (row) => {
    deleteRole(row.id).then((res) => {
        console.log(res);
        ElMOpen(res.message, "success")
        getData()
    })
}
// 编辑

let editRole = (row) => {
    row.show = true
}
let editRoleDing = (row) => {
    editPermission(row.id, row).then((res) => {
        console.log(res);
        ElMOpen(res.message, "success")
        getData()
    })
}
let editRoleXiao = (row) => {
    row.show = false
}



</script>

<style scoped lang="scss">
.role {
    background: #fff;
}

.role-button {
    padding: 20px;
    font-size: 12px;

    button {
        background-color: #2752fb;
    }
}

.role-table {
    padding: 20px;

}

.el-tree-node__content {
    line-height: 47px !important;
}

.role-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.el-pagination>.is-last {
    vertical-align: middle;
}
</style>